import React, { Component } from 'react';
import { connect } from 'react-redux';
import { actionCreators } from './store';
import {
    Headerwrapper,
    Logo,
    NavBar,
    Container,
    ButWrapper,
    Tab, Search,
    ContainerItem, Mode,
    ButItem,
    SearchWrapper,
    SearchInfoWrapper,
    SearchInfoHeader,
    SearchInfoTitle,
    SearchInfoList,
    SearchInfoItem
} from './style'
import { Link } from 'react-router-dom'
import { actionCreators as loginActionCreators } from '../../pages/login/store/'

class Header extends Component {
    getSearchInfo() {
        const { focused, list, enterInto, page, totalPage, changeEnter, changeLeave, changePage } = this.props
        const newList = list.toJS();
        const pageList = [];
        if (newList.length) {
            for (let i = (page - 1) * 10; i < page * 10; i++) {
                pageList.push(
                    <SearchInfoItem key={newList[i]}>{newList[i]}</SearchInfoItem>
                )
            }
        }

        if (focused || enterInto) {
            return (
                <SearchInfoWrapper onMouseEnter={changeEnter} onMouseLeave={changeLeave}>
                    <SearchInfoHeader>
                        <SearchInfoTitle>热门搜索</SearchInfoTitle>
                        <SearchInfoTitle className="but" onClick={() => changePage(page, totalPage, this.spinIcon)}><i className="iconfont spin" ref={(icon) => { this.spinIcon = icon }}>&#xe851;</i> 换一批</SearchInfoTitle>
                    </SearchInfoHeader>
                    <SearchInfoList>
                        {pageList}
                    </SearchInfoList>
                </SearchInfoWrapper>
            )
        } else {
            return null
        }
    }
    render() {
        const { list, focused, loginState, changeSearchFocus, changeSearchBlur, loginOut } = this.props
        return (
            <Headerwrapper>
                <NavBar>
                    <Logo></Logo>
                    <Container>
                        <ContainerItem>
                            <Tab className='home'><i className="iconfont">&#xe606;</i>首页</Tab>
                            <Tab className='download'><i className="iconfont">&#xe60d;</i>下载App</Tab>
                            <SearchWrapper>
                                <Search className={focused ? 'focused' : ''} onFocus={() => changeSearchFocus(list)} onBlur={changeSearchBlur}></Search>
                                <i className={focused ? 'iconfont focused zomm' : 'iconfont zomm'}>&#xe60a;</i>
                                {this.getSearchInfo()}
                            </SearchWrapper>
                        </ContainerItem>
                        <ContainerItem>
                            <Mode>Aa</Mode>
                            {loginState ? <Link to={'/login'}><Mode onClick={loginOut} >退出</Mode></Link> : <Link to={'/login'}><Mode>登录</Mode></Link>}

                            <ButWrapper>
                                <ButItem className="sign_up">注册</ButItem>
                                <Link to={'/write'}><ButItem className="write_btn"><i className="iconfont">&#xe62b;</i> 写文章</ButItem></Link>
                            </ButWrapper>
                        </ContainerItem>
                    </Container>
                </NavBar>
            </Headerwrapper>
        );

    }

}


const mapStateToProps = (state) => {
    return { // 接收redux中state里的的数据，映射到当前的组件中
        // focused: state.get('header').get('focused')
        focused: state.getIn(['header', 'focused']),
        list: state.getIn(['header', 'list']),
        enterInto: state.getIn(['header', 'enterInto']),
        page: state.getIn(['header', 'page']),
        totalPage: state.getIn(['header', 'totalPage']),
        loginState: state.getIn(['login','loginState'])
    }
}

const mapDispathToProps = (dispatch) => {
    return {
        changeSearchFocus(list) {
            (list.size === 0) && dispatch(actionCreators.getList());
            dispatch(actionCreators.searchFocus());
        },
        changeSearchBlur() {
            dispatch(actionCreators.searchBlur())
        },
        changeEnter() {
            dispatch(actionCreators.changeEnter())
        },
        changeLeave() {
            dispatch(actionCreators.changeLeave())
        },
        changePage(page, totalPage, spin) {
            let originAngle = spin.style.transform.replace(/[^0-9]/ig, '');
            if (originAngle) {
                originAngle = Number(originAngle);
            } else {
                originAngle = 0;
            }
            spin.style.transform = 'rotate(' + (originAngle + 360) + 'deg)';
            if (page < totalPage) {
                dispatch(actionCreators.changePage(page + 1));
            } else {
                dispatch(actionCreators.changePage(1));
            }
        },
        loginOut() {
            dispatch(loginActionCreators.loginOut())
        }
    }
}

export default connect(mapStateToProps, mapDispathToProps)(Header);